<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>   
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>  
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>       
<c:set var="ctx" value="${pageContext.request.contextPath}"/> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="../include.jsp"/>
<script type="text/javascript">
	
	var dataGrid;
	$(function() {
		parent.$.messager.progress('close');
		$('#form').form({
			url : '${ctx}/dict/addDict',
			onSubmit : function() {
				validate = $(this).form('validate');	
				if(validate){
					checkData = checkDatagrid();
					if(checkData){
						return true;
					}else{
						return false;
					}
				}else{
					return false;
				}				
			},
			success : function(result) {
				parent.$.messager.progress('close');
				result = $.parseJSON(result);
				if(result.success) {
					parent.$.modalDialog.openner_dataGrid.datagrid('load');
					parent.$.modalDialog.handler.dialog('close');
					parent.$.messager.alert('系统提示', result.msg, 'info');
				} else {
					parent.$.messager.alert('错误', result.msg, 'error');
				}
			}
		});
		
		
		
		var dictId = "${dictId}";
		var _url ="";
		if(dictId!=""){
			_url = '${ctx}/dict/listDictItems?dictId='+dictId;
		}
		var editRow = undefined;		 
	    $("#dg").datagrid({
	        height: 300,
	        width: '100%',
	        title: '',
	        fit:true,
	        fitColumns:true,
	        collapsible: true,
	        singleSelect: true,
	        rownumbers: true,
	        url: _url,
	        idField: 'dictItemId',
	        rowStyler: function(index,row){
				if (row.idColumn =='1'){
					return 'background-color:#ffee00;color:red;';
				}
			},
	        columns: [[	         	
	            {field:'itemText',title:'字典项文本',width:220,editor: { type: 'validatebox',options:{required:true,validType:'isBlank'} } },
	            {field:'itemValue',title:'字典项值',width:200,editor: { type: 'validatebox',options:{required:true,validType:'isBlank'} } },
	            {field:'sortOrder',title:'排序',width:50,editor: { type: 'validatebox',options:{required:true,validType:'number'} } }
	        ]],
	        toolbar: [{
	            text: '添加', iconCls: 'icon-add', handler: function () {
	                if (editRow != undefined) {
	                    $("#dg").datagrid('endEdit', editRow);
	                }
	                if (editRow == undefined) {
	                    $("#dg").datagrid('insertRow', {
	                        index: 0,
	                        row: {dataType:'String',idColumn:0}
	                    });	 
	                    $("#dg").datagrid('beginEdit', 0);
	                    editRow = 0;
	                }
	            }
	        }, '-', {
	            text: '撤销', iconCls: 'icon-redo', handler: function () {
	                editRow = undefined;
	                $("#dg").datagrid('rejectChanges');
	                $("#dg").datagrid('unselectAll');
	            }
	        }, '-', {
	            text: '删除', iconCls: 'icon-remove', handler: function () {
	                var rows = $("#dg").datagrid('getSelections');
	                deleteRow(rows); 
	            }
	        }],
	        onAfterEdit: function (rowIndex, rowData, changes) {
	            editRow = undefined;
	        },
	        onDblClickRow:function (rowIndex, rowData) {
	            if (editRow != undefined) {
	                $("#dg").datagrid('endEdit', editRow);
	            }	 
	            if (editRow == undefined) {
	                $("#dg").datagrid('beginEdit', rowIndex);
	                editRow = rowIndex;
	            }
	        },
	        onClickRow:function(rowIndex,rowData){
	            if (editRow != undefined) {
	                $("#dg").datagrid('endEdit', editRow);
	 				
	            }            
	        }
	        
	    });	    
	});
		
	function formatterOpt(value, row, index){
		return $.formatString('<a href="javascript:void(0);" onclick="view(\'{0}\');">{1}</a>', row.dictId,'删除'); 
	}
	
	
	function deleteRow(rows){
		var allRows = $('#dg').datagrid('getRows');
		if(allRows.length == 0){
			return;
		}
		// 前端删除
		for(i=0;i<rows.length;i++){
			var index = $("#dg").datagrid('getRowIndex',rows[i]) 
			$("#dg").datagrid('deleteRow',index)//根据索引删除对应的行
	    }
	}
	
	function setEntities(){
		var rows = $('#dg').datagrid('getRows');
	    var entities='';
	 	// 循环 datagrid 中现有的数据，并且逐行复制给Entities ，并且转换成json格式
	 	// 在后台反序列话成对象的对象集合。
	    for(i = 0;i < rows.length;i++)
	    {
	       entities = entities  + JSON.stringify(rows[i]);  
	    }
	    $("#entities").val(entities);
	}
	
	//datagrid 数据校验
	function checkDatagrid(){	
		var rows = $("#dg").datagrid('acceptChanges');	
		var rows = $('#dg').datagrid('getRows');
		var entities='';
	 	// 循环 datagrid 中现有的数据，并且逐行复制给Entities ，并且转换成json格式
	 	// 在后台反序列话成对象的对象集合。
	 	
	    for(i = 0;i < rows.length;i++)
	    {
	       entities = entities  + JSON.stringify(rows[i]);	      
	    }
	    if(entities==''){
	    	parent.$.messager.alert('错误', '字典不能为空!', 'error');
	    	return false;
	    }else{
	    	$("#entities").val(entities);
	    	return true;
	    }
	}
	
</script>
</head>
<body>
	<div class="easyui-layout" data-options="fit:true,border:false">
		<div data-options="region:'center',border:false" title="" style="position:relative;overflow-y:scroll;">			
			<form id="form" method="post">
				<input name="dictId" type="hidden" value="${dictId}">
				<!-- 保存datagrid提交的数据 -->
				<input id="entities" name="entities" type="hidden" value="">
	            <div style="margin-bottom:5px;padding-top:30px;padding-left:30px">
	                <input labelAlign="right" class="easyui-textbox" name="dictName" value="${dict.dictName}" style="width:80%" data-options="label:'字典名称:',required:true">
	            </div>	 
	            <div style="margin-bottom:5px;padding-left:30px">
	                <input labelAlign="right" class="easyui-textbox" name="dictCode" value="${dict.dictCode}" style="width:80%" data-options="label:'字典编码:',required:true">
	            </div>	
	            <div style="margin-bottom:5px;padding-left:30px">
	              <label style="text-align: right"  class="textbox-label textbox-label-after textbox-label-checked">启用状态:</label>
		          <c:if test="${empty dictId}">
		          	<input class="easyui-radiobutton" name="delFlag" value="1" labelWidth="40px" label="启用" labelPosition="after" checked="true">
		          	<input class="easyui-radiobutton" name="delFlag" value="0" labelWidth="40px" label="停用" labelPosition="after" >
		          </c:if>
		          <c:if test="${not empty dictId}">
		          	<input class="easyui-radiobutton" name="delFlag" value="1" labelWidth="40px" label="启用" labelPosition="after" <c:if test="${dict.delFlag=='1'}">checked="true"</c:if>>
		          	<input class="easyui-radiobutton" name="delFlag" value="0" labelWidth="40px" label="停用" labelPosition="after" <c:if test="${dict.delFlag=='0'}">checked="true"</c:if> >
		          </c:if>
		        </div>                           
	            <div style="margin-bottom:5px;padding-left:30px">
	                <input labelAlign="right" class="easyui-textbox" name="description" value="${dict.description}" style="width:80%;height:60px" data-options="label:'字典描述:',multiline:true">
	            </div>	
	            <table id="dg"></table>
	        </form>	       
		</div>
	</div>
</body>
</html>